<!--首页-->
<template>
    <div>
         
         <div class="main">

         <el-carousel height="400px"  :interval="4000" >
            <el-carousel-item v-for="item in banner" :key="item">
               <img style="width:100%;height:100%" :src="item.url"> 
             
            </el-carousel-item>
        </el-carousel>
         </div>
        <div class="item1">我们的优势</div>
        <div class="item2">
            <el-carousel style="width:300px;margin: 0 auto;" :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in banner2" :key="item">
                <el-image style="width:100px;height:150px" :src="item"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="warning">
                <p>
                    驾校通告
                </p>
            </div>
            <el-row style="padding-top: 10px;">
                <el-col :span="8" >

                    <el-collapse style="width:800px" v-model="activeName" accordion>
                    <el-collapse-item  v-for="item in Notice" :key="item.id">
                        <template slot="title">
                        <i :style="item.isred == '1'?'color: red':''" class="header-icon el-icon-message-solid tongzhi"></i><p class="tongzhi">{{item.name}}</p>
                        <p class="tongzhi" style="margin-left: 500px;">{{item.createTime}}</p>
                        </template>
                        <div>{{item.content}}</div>
    
                    </el-collapse-item>
                    
                    </el-collapse>
                </el-col>
                <el-col :span="16">

                </el-col>

            </el-row>
    </div>
</template>
<script>
export default {
    data () {
        return {
            activeName:1,
            Notice:[],
            banner:[],
            banner2:[
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=869049014,3360485082&fm=11&gp=0.jpg',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1143363960,3769649402&fm=26&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=421547021,2062929038&fm=26&gp=0.jpg'
            ]
        }
    },
    created(){
        this.getList();
        this.findNotice();
    },
    methods: {
         getList(){ //获取数据
            this.$api.get('/banner/getCarMap','',Response=>{
                if(Response.data.code == 200){
                       this.banner = Response.data.data;
                    }
            })
        },
        findNotice(){//查询公告
                this.$api.get('/notice/findNotice','',Response=>{
                        if(Response.data.code == 200){
                                this.Notice =Response.data.data;
                        }
                })
        }
    },
}
</script>
<style scoped>
.main{
     background-color: #eee;
}
.item1{
   text-align: center;
    font-size: 24px;
    font-weight: bolder;
    margin: 10px auto;
}
.warning p{
    font-size: unset;
    font-weight: bolder;
}
.mulu{
    line-height: 60px;
    color: white;
    
    
}
 .warning {
    padding: 0px 8px;
    border-radius: 4px;
    border-left: 10px solid blue;
    margin: 10px 0;
}
.mulu:hover{
    line-height: 60px;
    color:#606266;
}
</style>
